<template>
    <div class="page-container">
        <!-- 顶部标题区 -->
        <header-title title="综合数据看板" @refresh="" @export=""/>
        <!-- 主要内容区 -->
        <div class="main-content">
            <div class="content--left">
                <!-- 能耗统计区 -->
                <div class="energy-section">
                    <div class="section-header">
                        <h2>能耗统计</h2>
                        <div class="time-tabs">
                            <TimeTabs @change=""></TimeTabs>
                        </div>
                    </div>

                    <div class="energy-cards">

                        <EnergyCard
                            class="energy-card-first"
                            type="comprehensive"
                            :label="energyData.comprehensive.label"
                            :value="energyData.comprehensive.value"
                            :unit="energyData.comprehensive.unit"
                        />
                        <div class="inner-container">
                            <EnergyCard
                                v-for="item in energyData.items"
                                :key="item.type"
                                :type="item.type"
                                :label="item.label"
                                :value="item.value"
                                :unit="item.unit"
                            />
                        </div>
                    </div>
                </div>
                <!-- 左侧图表 -->
                <div class="left-panel">
                    <div class="chart-container">
                        <div class="chart-header">
                            <span class="chart-title">综合能耗tce</span>
                        </div>
                        <div ref="lineChart" style="width: 100%; height: 300px;box-sizing: border-box"></div>
                    </div>

                </div>
            </div>

            <!-- 右侧价格表 -->
            <div class="content--right">
                <div class="price-section">
                    <h3>能耗单价</h3>
                    <div class="price-group">
                        <div class="price-header">
                            <span class="price-icon water"></span>
                            <span>水</span>
                        </div>
                        <div class="price-item">
                            <span class="price-label">水价</span>
                            <span class="price-value"> <span>4.3</span> <span class="grey-text">元/m³</span></span>
                        </div>
                    </div>

                    <div class="price-group">
                        <div class="price-header">
                            <span class="price-icon electricity"></span>
                            <span>电（丰水期）</span>
                        </div>
                        <div class="price-item">
                            <span class="item--left">
                                <span class="price-label">第一档</span>
                                <span class="price-range">1-180kWh及以下</span>
                            </span>
                            <span class="price-value">0.5224 元/kWh</span>
                        </div>
                        <div class="price-item">
                            <span class="item--left">
                                <span class="price-label">第一档</span>
                                <span class="price-range">1-180kWh及以下</span>
                            </span>
                            <span class="price-value">0.5224 元/kWh</span>
                        </div>
                        <div class="price-item">
                            <span class="item--left">
                                <span class="price-label">第一档</span>
                                <span class="price-range">1-180kWh及以下</span>
                            </span>
                            <span class="price-value">0.5224 元/kWh</span>
                        </div>
                    </div>

                    <div class="price-group">
                        <div class="price-header">
                            <span class="price-icon gas"></span>
                            <span>天然气</span>
                        </div>
                        <div class="price-item">
                            <span class="item--left">
                                <span class="price-label">第一档</span>
                                <span class="price-range">1-180kWh及以下</span>
                            </span>
                            <span class="price-value">0.5224 元/kWh</span>
                        </div>
                        <div class="price-item">
                            <span class="item--left">
                                <span class="price-label">第一档</span>
                                <span class="price-range">1-180kWh及以下</span>
                            </span>
                            <span class="price-value">0.5224 元/kWh</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-content--footer">
            <div class="chart-container">
                <div class="chart-header">
                    <span class="chart-title">能耗统计</span>
                    <div class="time-tabs">
                        <TimeTabs @change=""></TimeTabs>
                    </div>
                </div>
                <div class="cost-chart-wrapper">
                    <div class="pie-chart-container">
                        <div id="pieChart" style="width: 300px; height: 300px;"></div>
                    </div>
                    <div id="barChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
            <div class="cost-summary">
                <div class="cost-item" v-for="item in costData" :key="item.type"
                     :style="{backgroundColor:item.backgroundColor,borderColor:item.color}">
                    <div class="cost-color" :style="{backgroundColor: item.color}"></div>
                    <span class="cost-label">{{ item.label }}</span>
                    <span class="cost-percent">{{ item.percent }}%</span>
                    <span class="cost-value">{{ item.value }} <span class="small">元</span>   </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import EnergyCard from '@/components/EnergyCard/index.vue'
import TimeTabs from '@/components/TimeTabs/index.vue'
import HeaderTitle from "@/components/headerTitle/index.vue";

export default {
    components: {HeaderTitle, EnergyCard, TimeTabs},
    data() {
        return {
            activeTab: 'today',
            costActiveTab: 'today',
            chart: {},
            timeTabs: [
                {key: 'today', label: '本日'},
                {key: 'month', label: '本月'},
                {key: 'quarter', label: '本季度'},
                {key: 'year', label: '本年'}
            ],
            energyData: {
                comprehensive: {
                    label: '综合能耗',
                    value: '0',
                    unit: 'tce'
                },
                items: [
                    {
                        type: 'electricity',
                        label: '电',
                        value: '123.43',
                        unit: 'kWh',
                        color: '#F7BA2A',
                        icon: 'el-icon-lightning'
                    },
                    {
                        type: 'water',
                        label: '水',
                        value: '324.03',
                        unit: 'm³',
                        color: '#1890FF',
                        icon: 'el-icon-goblet'
                    },
                    {
                        type: 'gas',
                        label: '天然气',
                        value: '3123.43',
                        unit: 'm³',
                        color: '#52C41A',
                        icon: 'el-icon-smoking'
                    },
                    {
                        type: 'compressed_air',
                        label: '压缩空气',
                        value: '0',
                        unit: 'm³',
                        color: '#722ED1',
                        icon: 'el-icon-wind-power'
                    },
                    {
                        type: 'heat',
                        label: '热量',
                        value: '123.43',
                        unit: 'kJ',
                        color: '#FA541C',
                        icon: 'el-icon-hot-water'
                    },
                    {
                        type: 'cold',
                        label: '冷量',
                        value: '324.03',
                        unit: 'm³',
                        color: '#13C2C2',
                        icon: 'el-icon-ice-cream'
                    }
                ]
            },
            costData: [
                {
                    type: 'electricity',
                    label: '电',
                    percent: 50,
                    value: '15123.43',
                    backgroundColor: '#FFFAE1',
                    color: '#F7BA2A'
                },
                {
                    type: 'water',
                    label: '水',
                    percent: 50,
                    value: '15123.43',
                    backgroundColor: '#E1F5FF',
                    color: '#1890FF'
                },
                {
                    type: 'gas',
                    label: '气',
                    percent: 50,
                    value: '15123.43',
                    backgroundColor: '#EEFFE3',
                    color: '#52C41A'
                },
                {
                    type: 'compressed_air',
                    label: '压缩空气',
                    percent: 50,
                    value: '15123.43',
                    backgroundColor: '#F5F7FA',
                    color: '#722ED1'
                },
                {
                    type: 'cold',
                    label: '冷量',
                    percent: 50,
                    value: '15123.43',
                    backgroundColor: '#E8FDFF',
                    color: '#13C2C2'
                },
                {
                    type: 'heat',
                    label: '热量',
                    percent: 50,
                    value: '15123.43',
                    backgroundColor: '#FFF5EE',
                    color: '#FA541C'
                }
            ]
        }
    },

    mounted() {
        this.$nextTick(() => {
            this.initCharts()
        })
    },
    unMounted() {

    },
    methods: {
        handleResize() {
            if (this.chart) {
                this.chart.resize();
                console.log('222222222222222222')
            }
        },

        initCharts() {
            setTimeout(() => {
                this.initLineChart()
                this.initPieChart()
                this.initBarChart()
            }, 500);

            window.addEventListener('resize', this.handleResize);
        },

        initLineChart() {
            this.chart = this.$echarts.init(this.$refs.lineChart)
            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderColor: '#E6EBF5',
                    borderWidth: 1,
                    textStyle: {
                        color: '#333'
                    },
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                },
                grid: {
                    left: '20px',
                    right: '20px',
                    bottom: '30px',
                    top: '20px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '23:59'],
                    axisLabel: {
                        color: '#909399',
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#E6EBF5'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 1,
                    axisLabel: {
                        color: '#909399',
                        fontSize: 12
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#F2F6FC',
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    data: [0.6, 0.5, 0.55, 0.85, 0.7, 0.6, 0.5, 0.75, 0.8, 0.6, 0.7, 0.65, 0.6],
                    type: 'line',
                    color: '#1EC7FF',
                    smooth: false,
                    showSymbol: false,
                }]
            }
            this.chart.setOption(option)
        },

        initPieChart() {
            const chart = this.$echarts.init(document.getElementById('pieChart'))
            const option = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderColor: '#E6EBF5',
                    borderWidth: 1,
                    textStyle: {
                        color: '#333'
                    },
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [{
                    name: '总费用',
                    type: 'pie',
                    radius: ['45%', '75%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: false,
                    data: [
                        {value: 25310, name: '电', itemStyle: {color: '#F7BA2A'}},
                        {value: 15310, name: '水', itemStyle: {color: '#1890FF'}},
                        {value: 10620, name: '气', itemStyle: {color: '#52C41A'}},
                        {value: 20000, name: '压缩空气', itemStyle: {color: '#722ED1'}},
                        {value: 8500, name: '热量', itemStyle: {color: '#FA541C'}},
                        {value: 6200, name: '冷量', itemStyle: {color: '#13C2C2'}}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 15,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        },
                        scaleSize: 5
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }],
                graphic: [{
                    type: 'text',
                    left: 'center',
                    top: '45%',  // 上移5%位置
                    style: {
                        text: '71,240元',
                        textAlign: 'center',
                        fill: '#333',
                        fontSize: 20,
                        fontWeight: 'bold'
                    },
                }, {
                    type: 'text',
                    left: 'center',
                    top: '55%',  // 下移5%位置
                    style: {
                        text: '总费用',
                        textAlign: 'center',
                        fill: '#909399',
                        fontSize: 14,
                        fontWeight: 'normal'
                    },
                }]
            }
            chart.setOption(option)
        },

        initBarChart() {
            const chart = this.$echarts.init(document.getElementById('barChart'))
            const option = {
                title: {
                    text: '单位：元',
                    textStyle: {
                        color: '#606266',       // 文字颜色
                        fontSize: 12,        // 字号
                        fontFamily: 'Arial'  // 字体
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderColor: '#E6EBF5',
                    borderWidth: 1,
                    textStyle: {
                        color: '#333'
                    },
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: 'rgba(24, 144, 255, 0.1)'
                        }
                    }
                },
                legend: {
                    data: ['电', '水', '气', '压缩空气', '热量', '冷量'],
                    top: 0,
                    right: 0,
                    show: false,
                    textStyle: {
                        color: '#606266',
                        fontSize: 12
                    },
                    itemWidth: 12,
                    itemHeight: 12
                },
                grid: {
                    left: '20px',
                    right: '20px',
                    bottom: '30px',
                    top: '40px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '23:59'],
                    axisLabel: {
                        color: '#909399',
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#E6EBF5'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#606266',
                        fontSize: 12
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#DFE6EC',
                            type: 'solid'
                        }
                    }
                },
                series: [
                    {
                        name: '电',
                        type: 'bar',
                        stack: 'total',
                        data: [100, 50, 80, 120, 200, 150, 180, 160, 200, 180, 220, 190, 160],
                        color: '#F7BA2A',
                        barWidth: 20,  // 新增宽度配置
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        }
                    },
                    {
                        name: '水',
                        type: 'bar',
                        stack: 'total',
                        data: [200, 180, 160, 200, 300, 250, 280, 260, 300, 280, 320, 290, 260],
                        color: '#1890FF',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        }
                    },
                    {
                        name: '气',
                        type: 'bar',
                        stack: 'total',
                        data: [150, 120, 140, 180, 250, 200, 230, 210, 250, 230, 270, 240, 210],
                        color: '#52C41A',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        }
                    },
                    {
                        name: '压缩空气',
                        type: 'bar',
                        stack: 'total',
                        data: [80, 60, 70, 90, 120, 100, 110, 105, 120, 110, 130, 115, 105],
                        color: '#722ED1',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        }
                    },
                    {
                        name: '热量',
                        type: 'bar',
                        stack: 'total',
                        data: [60, 45, 55, 70, 95, 80, 88, 85, 95, 88, 105, 92, 85],
                        color: '#FA541C',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        }
                    },
                    {
                        name: '冷量',
                        type: 'bar',
                        stack: 'total',
                        data: [40, 30, 35, 45, 60, 50, 55, 52, 60, 55, 65, 58, 52],
                        color: '#13C2C2',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        }
                    }
                ]
            }
            chart.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
